import { Button, Input, Select, Switch } from 'antd';
import React, { useMemo } from 'react';

import FormLabel from '@/components/MyBox/FormLabel';
import MyModal from '@/components/MyModal';
import QuestionTip from '@/components/tooltip/QuestionTip';
import { t } from '@/locales/i18n';
import { toolValueTypeList, WorkflowIOValueTypeEnum } from '@/types/workflow/constant';
import { ContextExtractAgentItemType } from '@/types/workflow/template/system/contextExtract/type';

const { TextArea } = Input;

export const defaultField: ContextExtractAgentItemType = {
  valueType: WorkflowIOValueTypeEnum.string,
  required: false,
  defaultValue: '',
  desc: '',
  key: '',
  enum: '',
};

const ExtractFieldModal = ({
  defaultField,
  onClose,
  onSubmit,
}: {
  defaultField: ContextExtractAgentItemType;
  onClose: () => void;
  onSubmit: (data: ContextExtractAgentItemType) => void;
}) => {
  // const { register, setValue, handleSubmit, watch } = useForm<ContextExtractAgentItemType>({
  //   defaultValues: defaultField
  // });

  const [value, setValue] = React.useState<ContextExtractAgentItemType>(defaultField);

  const required = useMemo(() => value.required, [value]);
  const valueType = useMemo(() => value.valueType, [value]);

  return (
    <MyModal
      isOpen
      iconSrc="menu_set"
      title={t('core.module.extract.Field Setting Title')}
      onClose={onClose}
      minW={['90vw', '500px']}
    >
      <div>
        <div className="mt-2 flex items-center gap-2">
          <div className="flex w-16 flex-1 items-center">
            <FormLabel>{t('core.module.extract.Required')}</FormLabel>
            <QuestionTip className="ml-1" title={t('core.module.extract.Required Description')} />
          </div>
          <Switch
            checked={required}
            onChange={(e) => {
              setValue({ ...value, required: e });
            }}
          />
        </div>
        {required && (
          <div className="mt-5 flex items-center gap-2">
            <FormLabel className="w-16">{t('core.module.Default value')}</FormLabel>
            <Input
              className="bg-gray-500"
              placeholder={t('core.module.Default value placeholder')}
              // {...register('defaultValue')}
              value={value.defaultValue}
              onChange={(e) => {
                setValue({ ...value, defaultValue: e.target.value });
              }}
            />
          </div>
        )}

        <div className="mt-5 flex items-center gap-2">
          <FormLabel className="w-16">{t('core.module.Data Type')}</FormLabel>
          <div>
            <Select
              className="w-40"
              popupClassName="workflow-dropdown"
              options={toolValueTypeList}
              value={valueType}
              onChange={(e) => {
                // setValue('valueType', e);
                setValue({ ...value, valueType: e });
              }}
            />
          </div>
        </div>

        <div className="mt-5 flex items-center gap-2">
          <FormLabel className="w-16">{t('field_name')}</FormLabel>
          <Input
            className="bg-gray-500"
            placeholder="name/age/sql"
            value={value.key}
            onChange={(e) => {
              setValue({ ...value, key: e.target.value });
            }}
          />
        </div>
        <div className="mt-5 flex items-center gap-2">
          <FormLabel className="w-16">{t('core.module.Field Description')}</FormLabel>
          <Input
            className="bg-gray-500"
            placeholder={t('core.module.extract.Field Description Placeholder')}
            value={value.desc}
            onChange={(e) => {
              setValue({ ...value, desc: e.target.value });
            }}
          />
        </div>
        {(valueType === 'string' || valueType === 'number') && (
          <div className="mt-5">
            <div className="mb-2 flex items-center gap-2">
              <FormLabel>
                {t('core.module.extract.Enum Value')}({t('common.choosable')})
              </FormLabel>
              <QuestionTip className="mt-1" title={t('core.module.extract.Enum Description')} />
            </div>

            <TextArea
              rows={5}
              className="bg-gray-500"
              placeholder={'apple\npeach\nwatermelon'}
              value={value.enum}
              onChange={(e) => {
                setValue({ ...value, enum: e.target.value });
              }}
            />
          </div>
        )}
      </div>

      <div className="ml-auto mt-4">
        <Button
          type="primary"
          onClick={() => {
            onSubmit(value);
          }}
        >
          {t('common.Confirm')}
        </Button>
      </div>
    </MyModal>
  );
};

export default React.memo(ExtractFieldModal);
